<script>
import messageItem from './components/messageItem.vue'
import upload from '@/components/upload.vue'
import { submitOrderDynamics, getOrderDynamicsList, getOrderDetail, getOrderDynamicsTemplate, deliveryTake } from '@/api/publish.js'
export default {
	components: {
		messageItem,
		upload
	},
	data() {
		return {
			processTemplateIsShow: false,
			currentUserId: uni.getStorageSync("user_id"),
			replyChildOpenIndexes: [],
			replyRemark: '',
			modalShow: false,
			modalAn: false,
			previewVideoIsShow: false,
			showConfirm: false,
			previewVideoUrl: '',
			btnDis: false,
			listData: [],
			lang: uni.getStorageSync('lang'),
			formData: {
				/** 图片 */
				image: [],
				/** 内容 */
				remark: "",
				/** 视频 */
				video: [],
				/** 附件 */
				attachment: [],
				/** 类型 1正常 2异常 */
				status: 1,
				/** 发货id */
				delivery_id: "",
				/** 用户id */
				user_id: uni.getStorageSync("user_id")
			},
			orderDetail: {},
			processTemplateList: [],
			showFlag: false,
		}
	},
	onLoad(e) {
		this.formData.delivery_id = e.id
		if (e.completeFlag) {
			this.showFlag = e.completeFlag
			console.log('this.showFlag000', this.showFlag)
		}
		this.getList()
		this.getOrderDetail()
		this.getOrderDynamicsTemplate()
		// this.formData = {
		// 	"image": "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20250221/5eda5e36b2c9af7faa40c41f3b642d15.gif".split(','),
		// 	"remark": "12312312asdfsdfasdf",
		// 	"video": "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20250221/f6624e49108a81ebee07e89ca1fff8b1.mp4".split(','),
		// 	"attachment": "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20250221/d41d8cd98f00b204e9800998ecf8427e.docx,https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20250221/d41d8cd98f00b204e9800998ecf8427e.docx".split(','),
		// 	"status": 2,
		// 	"delivery_id": "23",
		// 	"user_id": 4209
		// }
	},
	methods: {
		async getOrderDynamicsTemplate() {
			const res = await getOrderDynamicsTemplate({
				delivery_id: this.formData.delivery_id
			})
			this.processTemplateList = res.data.data.data
		},
		async getOrderDetail() {
			const res = await getOrderDetail({
				delivery_id: this.formData.delivery_id
			})
			this.orderDetail = res.data.data.data
			console.log('this.orderDetail9999', this.orderDetail)
		},
		formDataInit() {
			delete this.formData.pid
			this.formData.image = [];
			this.formData.remark = "";
			this.formData.video = [];
			this.formData.attachment = [];
			this.formData.status = 1;
		},
		openModal(e) {
			if (e.id) {
				this.formData.pid = e.id
				this.replyRemark = e.remark
				this.formData.status = 1
			} else {
				delete this.formData.pid
			}
			this.modalShow = true;
			setTimeout(() => {
				this.modalAn = true;
			}, 10);
		},
		confirm() {
			deliveryTake({delivery_id: this.formData.delivery_id}).then(res => {
				this.btnDis= true
				uni.showLoading({
					title: '提交中'
				});
				console.log('res----', res)
				if(res.data.code == 200) {
					uni.showToast({
						title: this.$t('收货成功'),
						icon: "none",
					});
					uni.redirectTo({
						url: '/pages/shipmentRecord/index?index=4'
					})
					uni.hideLoading()
					this.btnDis= false
				} else {
					uni.showToast({
						title: res.data.message,
						icon: "none",
					});
					uni.hideLoading()
					this.btnDis= false
				}
			})
		},
		closeModal() {
			this.modalAn = false;
			setTimeout(() => {
				this.modalShow = false;
			}, 300);
		},
		downloadFile(url) {
			window.open(url)
		},
		previewVideo(url) {
			this.previewVideoIsShow = true;
			this.previewVideoUrl = url;
		},
		handleUpload(e) {
			if (this.formData.attachment.length >= 5) {
				return this.toast('附件最多只能上传5个')
			}
			console.log(e.url)
			console.log(e.fullurl)
			this.formData.attachment.push({
				name: e.fullurl.split("/")[e.fullurl.split("/").length - 1],
				url: e.fullurl
			})
		},
		previewPic(url) {
			uni.previewImage({
				urls: this.formData.pic,
				current: url
			})
		},
		uploadPic(key) {
			if (key == 'video') {
				if (this.formData.video.length >= 3) {
					return this.toast('视频最多只能上传3个')
				}
				uni.chooseVideo({
					count: this.formData.video.length == 0 ? 3 : 3 - this.formData.video.length,
					sourceType: ['album', 'camera'],
					success: async (res) => {
						const url = await this.uploadFile(res.tempFilePath)
						this.formData[key].push(url)
					}
				})
			} else {
				if (this.formData.image.length >= 6) {
					return this.toast('图片最多只能上传6个')
				}
				uni.chooseImage({
					count: this.formData.image.length == 0 ? 6 : 6 - this.formData.image.length,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: async (res) => {
						const url = await this.uploadFile(res.tempFilePaths[0])
						this.formData[key].push(url)
					}
				})
			}
			console.log('this.formData.image---', this.formData)
		},
		// 上传单个文件
		uploadFile(filePath) {
			return new Promise((resolve, reject) => {
				uni.uploadFile({
					url: 'https://app.gluz.com.cn/api/common/upload',
					filePath: filePath,
					name: 'file',
					success: (res) => {
						try {
							const data = JSON.parse(res.data)
							resolve(data.data.fullurl)
						} catch (e) {
							reject(e)
						}
					},
					fail: reject
				})
			})
		},
		back() {
			uni.navigateBack()
		},
		async getList() {
			uni.showLoading({
				title: this.$t('加载中'),
				mask: true
			});
			const res = await getOrderDynamicsList({
				delivery_id: this.formData.delivery_id,
				user_id: uni.getStorageSync("user_id")
			})

			this.listData = res.data.data.data
			uni.hideLoading()
		},
		async submit() {
			const formData = JSON.parse(JSON.stringify(this.formData))
			if (formData.remark == '') {
				return this.toast('请输入上报内容')
			}
			formData.attachment = this.formData.attachment.map(i => i.url).join(',')
			formData.image = this.formData.image.join(',')
			formData.video = this.formData.video.join(',')
			uni.showLoading({
				title: this.$t('提交中'),
				mask: true
			});
			const res = await submitOrderDynamics(formData)
			if (res.data.code == 200) {
				uni.hideLoading()
				this.closeModal()
				this.getList()
				this.formDataInit()
			}
			this.toast(res.data.message)
		},
		openDetail() {
			//FIXME: 获取完{{$t('订单详情')}}传递
			uni.navigateTo({
				url: '/pages/shipmentRecord/sourceDeatil?item=' + JSON.stringify(this.orderDetail)
			})
		},
		feedback() {
			uni.redirectTo({
				url: "/pages/shipmentRecord/afterSalesFeedback?item=" + JSON.stringify(this.orderDetail)
				// url: "/pages/freightOrder/afterSaleFreight?item=" + JSON.stringify(this.orderDetail)
			})
		}
	}
}
</script>
<template>
	<view class="container">

		<div style="height:50rpx"></div>
		<div class="header">
			<div class="back center" @click="back">
				<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
			</div>
			{{$t('运踪记录')}}
		</div>

		<u-popup :show="previewVideoIsShow" mode="center">
			<div class="center flex-col">
				<video style="width: 700rpx;" :src="previewVideoUrl" controls></video>
				<div class="btn bg-primary rounded-50 fz28 text-white w-200 h-80 center mt-20 mb-20"
					@click="previewVideoIsShow = false">{{$t('关闭')}}</div>
			</div>
		</u-popup>

		<div>

			<div class="between address-header bg-white"
				style="padding: 0 54rpx 24rpx;border-radius: 0 0 50rpx 50rpx; align-items: flex-start; ">
				<div class="flex-shrink-0" style="width: 200rpx;">
					<div class="flex mb-16">
						<flag class="w-50" :country="get(orderDetail, 'departure.area_info.country')" />
						<div class="font-bold fz28 ml-10">
							{{ get(orderDetail, "departure.area_info.name") }}
						</div>
					</div>
					<div class="fz22 text-555">
						{{ get(orderDetail, "departure.area_info.mergename") }}
					</div>
				</div>
				<div class="pb-40 flex flex-col" style="color: #278AFF;">
					{{$t('途径')}}{{ get(orderDetail, "transfer_count") }}
					<image src="/static/icon/route.png" mode="widthFix" style="width: 175rpx;"></image>
				</div>
				<div class="flex-shrink-0" style="width: 200rpx;">
					<div class="flex mb-16">
						<flag class="w-50" :country="get(orderDetail, 'reach.area_info.country')" />
						<div class="font-bold fz28 ml-10">
							{{ get(orderDetail, "reach.area_info.name") }}
						</div>
					</div>
					<div class="fz22 text-555">
						{{ get(orderDetail, "reach.area_info.mergename") }}
					</div>
				</div>
			</div>

			<div class="p-24" style="padding-bottom: 0;" @click="processTemplateIsShow = true">
				<div class="bg-white py-34 px-24 rounded-26 center fz24">
					<image src="/static/icon/processTemplate.png" class="w-30 h-30 flex-shrink-0 mr-10"></image>
					{{$t('流程模板')}}
				</div>
			</div>

			<u-popup :show="processTemplateIsShow" mode="bottom" :round="20">
				<div class="bg-white py-34 px-35 rounded-26 fz24 flex-col" style="height: 80vh;">
					<div class="fz26 font-bold center flex-shrink-0">{{$t('流程模板')}}</div>
					<div class="flex-1" style="overflow: auto;">

						<div class="item" v-for="(item, index) in processTemplateList">
							<div class="w-70 h-70 rounded-full center font-bold fz40"
								style="color:#ED6A15;border: 1rpx solid #FFD7C3;background: linear-gradient(to bottom, #FFFAF7, #FDDCC9);">
								{{ index + 1 }}
							</div>
							<div class="fz24 mt-20 mb-30 text-gray-3d3d3d" style="line-height:40rpx;">
								{{ item }}
							</div>
						</div>
					</div>
					<div @click="processTemplateIsShow = false"
						class="btn bg-primary center text-white rounded-50 fz28 h-80 mt-20 mb-20 flex-shrink-0">{{$t('关闭')}}
					</div>
				</div>
			</u-popup>



			<div class="p-24">
				<div class="bg-white py-34 px-24 rounded-26">
					<div class="between pb-24 mb-30" style="border-bottom: 1px solid #f0f0f0;">
						<div class="fz28 text-555 fz26 ">
							<!-- FIXME: 需要计算是否超时 -->
							<!-- <div>
								<image src="/static/icon/time-green.png" mode="widthFix"
									class="w-30 mr-10 flex-shrink-0">
								</image>
								<image src="/static/icon/time-red.png" mode="widthFix" class="w-30 mr-10 flex-shrink-0">
								</image>
								<div>{{$t('超时')}} 2{{$t('天')}}14小时28分12秒</div>
							</div> -->
							<!-- <div>
								{{$t('货主')}}ID{{ get(orderDetail, "user_id") }}
							</div> -->
							<div class="fz22">
								{{ get(orderDetail, "quotation_info.validity") }}
							</div>
							<div class="fz22">{{$t('订单开始时间')}}： {{ get(orderDetail, "create_at") }}</div>
							<div class="fz22 mt-10">{{$t('运踪开始时间')}}： {{ get(orderDetail, "attach.yuntrace_at") }}</div>
						</div>
						<div class="text-blue-2 fz24" @click="openDetail">
							{{$t('查看详情')}}
						</div>
					</div>

					<messageItem :replyChildOpenIndexes.sync="replyChildOpenIndexes" @openModal="openModal"
						@previewVideo="previewVideo" :item="item" :orderDetail="orderDetail" v-for="item in listData" />
					<u-empty :text="$t('暂时没有运踪记录')" v-if="listData.length == 0" mode="data" textSize="26"></u-empty>
				</div>
			</div>

		</div>


		<div v-if="!showFlag" class="control p-24 bg-white" style="border-radius:50rpx 50rpx  0 0 ;">
			<div class="between mt-20 mb-20" v-if="orderDetail.user_id == currentUserId">
				<div :disabled="btnDis" class="bg-primary flex-1 center h-90  rounded-50 fz28 text-white fz32 font-bold" @click="showConfirm = true">{{$t('确认收货')}}</div>
				<div class="w-30"></div>
				<div class="flex-1 center  h-90  rounded-50 fz28 text-white fz32 font-bold bg-orange-liner-gradient"
					@click="feedback">
					{{$t('申请售后')}}</div>
			</div>
			<div @click="openModal" class="between h-100 px-35  rounded-50"
				style="background-color: #F7F8FA;color: #A3A3A5;">
				<div class="fz32">{{$t('上报情况')}}</div>
				<div class="flex">
					<image src="/static/icon/send2.png" mode="widthFix" class="w-45"></image>
					<!-- <image src="/static/icon/add2.png" mode="widthFix" class="w-45 ml-50"></image> -->
				</div>
			</div>
		</div>


		<div class="modal" v-if="modalShow" :class="{ 'modal-show': modalAn }">
			<div class="modal-content" :class="{ 'modal-content-show': modalAn }">
				<div class="font-bold fz35 mb-20 between">
					{{ formData.pid ? $t('回复TA') : $t('情况上报') }}
					<div>
						<image src="/static/icon/close.png" mode="widthFix" class="w-30 mr-20" @click="closeModal">
						</image>
					</div>
				</div>
				<div class="fz26 mt-20 bg-gray-300 p-30 rounded-20" v-if="formData.pid">
					<span
						style="font-weight: bold;color: #278AFF;font-size: 30rpx;display: inline;margin-right: 10rpx;">@</span>
					{{ lang == 'zh' ? replyRemark.remark : replyRemark.remark_ru }}
				</div>
				<pre>
					<!-- {{ formData }} -->
				</pre>
				<div class="h-full w-full" style="overflow: auto;">
					<div class="flex mt-20 mb-20" v-if="!formData.pid">
						<div class="item fz26 py-20 px-30 center bg-gray rounded-50"
							:class="{ 'bg-green': formData.status == 1 }" @click="formData.status = 1">
							<image src="/static/icon/success2.png" mode="widthFix" v-if="formData.status == 2"
								class="w-30 mr-20"></image>
							<image src="/static/icon/success3.png" mode="widthFix" v-else class="w-30 mr-20"></image>
							<div class="fz26">{{$t('普通上报')}}</div>
						</div>
						<div class="w-20"></div>
						<div class="item fz26 py-20 px-30 center bg-gray rounded-50 "
							:class="{ 'bg-red': formData.status == 2 }" @click="formData.status = 2">
							<image src="/static/icon/error2.png" mode="widthFix" v-if="formData.status == 1"
								class="w-30 mr-20"></image>
							<image src="/static/icon/error3.png" mode="widthFix" v-else class="w-30 mr-20"></image>
							<div class="fz26">{{$t('异常上报')}}</div>
						</div>
					</div>

					<textarea v-model="formData.remark" class="fz26 mt-20 bg-gray rounded-20 w-full h-200 p-30"
						:placeholder="$t('请输入上报内容')"></textarea>

					<div class="flex">
						<div class="w-125 h-125 rounded-26 center flex-col border mt-30 flex-shrink-0 mr-20"
							@click="uploadPic('image')">
							<image src="/static/icon/add-pic.png" mode="widthFix" class="w-35"></image>
							<div class="fz24 mt-8">{{$t('添加图片')}}</div>
						</div>
						<div class="flex" style="overflow: auto;">
							<div class="w-125 h-125 rounded-26 center flex-col border mt-30 mr-20 relative flex-shrink-0"
								v-for="item in formData.image" @click="previewPic(item)">
								<image src="/static/icon/remove.png" mode="widthFix"
									@click.stop="formData.image = formData.image.filter(i => i != item)"
									class="w-35 h-35 absolute  z-10 del">
								</image>
								<image :src="item" mode="aspectFill" class="w-full h-full"></image>
							</div>
						</div>
					</div>

					<div class="flex">
						<div @click="uploadPic('video')"
							class="w-125 h-125 rounded-26 center flex-col border mt-30 flex-shrink-0 mr-20">
							<image src="/static/icon/add-video.png" mode="widthFix" class="w-35"></image>
							<div class="fz24 mt-8">{{$t('添加视频')}}</div>
						</div>
						<div class="flex" style="overflow: auto;">
							<div class="w-125 h-125 rounded-26 center flex-col border mt-30 mr-20 relative flex-shrink-0"
								v-for="item in formData.video" @click="previewVideo(item)">
								<image @click.stop="formData.video = formData.video.filter(i => i != item)"
									src="/static/icon/remove.png" mode="widthFix" class="w-35 h-35 absolute  z-10 del">
								</image>
								<image src="/static/icon/play.png" mode="aspectFill" class="w-40 h-40"></image>
							</div>
						</div>
					</div>

					<div class="flex  mt-30 w-full overflow-hidden" style="align-items: flex-start;">
						<div
							class="w-125 h-125 rounded-26 center flex-col border flex-shrink-0 mr-20 border flex-shrink-0 relative">
							<image src="/static/icon/add-file2.png" mode="widthFix" class="w-35"></image>
							<div class="fz24 mt-8">{{$t('添加文件')}}</div>
							<upload @change="handleUpload"
								style="opacity: 0;position: absolute;top: 0;left: 0;width: 100%;height: 100%;" />
						</div>
						<div class="files flex-1">
							<div class="item py-16 px-24 between rounded-18 mb-16 w-full relative"
								v-for="item in formData.attachment">


								<div class="flex text-1d1d1d fz24">
									<u-icon name="file-text" size="40rpx" class="mr-8" color="#278AFF"></u-icon>
									<div class="pb-3 w-200" style="word-break: break-all;width: 80%;">{{ item.name }}
									</div>
								</div>
								<image @click.stop="formData.attachment = formData.attachment.filter(i => i != item)"
									src="/static/icon/remove.png" mode="widthFix" class="w-35 h-35">
								</image>
							</div>
						</div>
					</div>
				</div>

				<div class="flex-shrink-0 bg-primary w-full h-90 center rounded-50 fz28 text-white mt-30 font-bold"
					@click="submit">{{$t('确认提交')}}
				</div>


			</div>
		</div>
		
		<u-modal
			:show="showConfirm"
			:title="$t('是否确认收货')"
			content='为了保证你的售后权益,请收到商品确认无误后后再确认收货'
			@confirm="confirm"
			@cancel="showConfirm = false"
			:showCancelButton="true"
			width="550rpx"
		></u-modal>
		<div style="height: 300rpx;"></div>

	</view>
</template>


<style lang="less">
.files {
	.item {
		background-color: #F7F7F7;
	}
}

.border {
	border: 1px solid #D8D8D8;
}

.bg-gray {
	background-color: #F7F7F7;
}

.bg-green {
	background-color: #EAF5EB;
	color: #29A838;
}

.bg-red {
	background-color: #FDECEC;
	color: #F53F3F;
}

.modal-show {
	background-color: rgba(0, 0, 0, 0.5) !important;
}

.modal-content-show {
	transform: translateY(0) !important;
}

.modal {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0);
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	align-items: flex-end;
	transition: all 0.3s ease;

	.modal-content {
		transform: translateY(100%);
		width: 100%;
		max-height: 90%;
		border-radius: 50rpx 50rpx 0 0;
		background-color: #fff;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		overflow: hidden;
		transition: all 0.3s ease;
	}
}

.control {
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	z-index: 9;
	box-shadow: 0 -10rpx 20rpx 0 rgba(0, 0, 0, 0.05);
}

.bg-orange-liner-gradient {
	background: linear-gradient(90deg, #FF811E 0%, #FFBE7C 100%);
}


.flex-wrap {
	flex-wrap: wrap;
}

.arc-green {
	background-color: #29A838;
}

.arc-red {
	background-color: #F53F3F;
}

.del {
	right: 0rpx;
	top: 0rpx;
	transform: translate(30%, -30%);
}

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.z-10 {
	z-index: 10;
}

.items-start {
	align-items: stretch;
}

.flex-shrink-0 {
	flex-shrink: 0;
}

.address-header {
	padding-top: 50rpx !important;
	background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

.container {
	height: 100%;
	align-items: stretch;
	background: #F6F7FB url("/static/bg/publish.png") no-repeat;
	/deep/ .u-modal__title {
		font-weight: 600 !important;
		color:#0E0E0E;
	}
	/deep/ .u-modal__content__text {
		text-align:center;
		color:#8C8C8C;
		line-height:48rpx;
	}
}

page {
	height: 100%;
}

.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 15rpx;
}
</style>
